﻿@model IEnumerable<FamilyJobsUI.Models.HomeIndexModel>

<div style="min-height: 20px"></div>
<div class="container-fluid">

    <div class="row">
        @foreach (var item in Model)
        {

            <div class="col-sm-6 col-md-3 col-xs-12">
                <div class="thumbnail">
                    <a href="@Url.Action("Create", "UserPoints", new { user_ID = item.user_ID })">
                        @*<a href="#" class="thumbnail">*@
                        @Html.Gravatar(item.user_Email, 300, new { Title = "My Gravatar", Alt = "Gravatar", @class = "thumbnail" })
                        @*</a>*@
                        <div class="caption">

                            <div class="row">
                                <div class="col-md-4">
                                    <h3>@item.user_Name</h3>
                                </div>
                                <div class="col-md-4">
                                    <h2>
                                        <span class="label label-success craftyGirlsFont">@item.pointTotal</span>
                                    </h2>

                                </div>
                            </div>

                            @*<p>@item.user_Email</p>*@
                        </div>
                    </a>
                </div>
            </div>



            @*<span style="padding:15px; margin: 15px;">
                    @Html.Gravatar(item.user_Email, 300, new { Title = "My Gravatar", Alt = "Gravatar", @class = "img-responsive" })
                </span>*@

            @*<div style="padding: 15px; margin: 15px">

                </div>*@


            @*<div class="col-md-3 col-sm-4 col-xs-6">
                    <a href="#x" class="thumbnail">
                        @Html.Gravatar(item.user_Email, 300, new { Title = "My Gravatar", Alt = "Gravatar" , @class = "img-responsive" })
                    </a>
                </div>*@
        }

    </div>
</div>


<style>
        .thumbnail {
            padding: 0px;
        }
        /*.dummy {
        margin-top: 100%;
    }
    .thumbnail {
        position: absolute;
        top: 15px;
        bottom: 0;
        left: 15px;
        right: 0;
    }*/

        .craftyGirlsFont {
            font-family: 'Crafty Girls', cursive;
            font-weight: 400; 
            font-size: 48px;

        }
</style>

<link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>


<script>
    $('.thumbnail').click(function () {
        //Some code
    });

</script>